<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
         img{
            background: red;
            /* border: 1px solid red; */
         }

    </style>
</head>

<body>
    <!-- 页面内容开始 -->
    <img id="target-image"
        src=""
        alt="描述文字">

    <!-- 展示鼠标点击位置信息 -->

    <div class="info" id="click-info">
        点击图片后，这里会显示点击位置的坐标
    </div>
    <!-- JavaScript 文件链接 -->
    <script>
        document.getElementById('target-image').addEventListener('click', function (event) {
            // 获取图片元素
            const img = event.target;

            // 计算点击位置相对于图片的坐标
            const rect = img.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

            // 计算相对于图片宽高的百分比位置
            const percentX = (x / rect.width) * 100;
            const percentY = (y / rect.height) * 100;

            // 显示结果
            const infoDiv = document.getElementById('click-info');
            infoDiv.innerHTML = `
                <p>绝对坐标: X=${x.toFixed(1)}px, Y=${y.toFixed(1)}px</p>
                <p>相对百分比: X=${percentX.toFixed(1)}%, Y=${percentY.toFixed(1)}%</p>
                <p>图片尺寸: ${rect.width}px × ${rect.height}px</p>
            `;

            // 可以在控制台查看更详细的信息
            console.log('图片点击事件:', {
                element: img,
                clientX: event.clientX,
                clientY: event.clientY,
                offsetX: x,
                offsetY: y,
                percentX: percentX,
                percentY: percentY,
                imageWidth: rect.width,
                imageHeight: rect.height
            });
        });
    </script>
</body>

</html>